<template>
  <div class="w-full">
    <ma-image-upload v-if="props.type === 'image'" v-model="file" />
    <ma-file-upload v-if="props.type === 'file'" v-model="file" />
    <ma-chunk-upload v-if="props.type === 'chunk'" v-model="file" />
  </div>
</template>
<script setup>
import { ref, watch, provide } from "vue"
import { Message } from "@arco-design/web-vue"

import uploadConfig from "@/config/upload"
import MaImageUpload from "./components/image-upload.vue"
import MaFileUpload from "./components/file-upload.vue"
import MaChunkUpload from "./components/chunk-upload.vue"

const emit = defineEmits(["update:modelValue"])
const file = ref()
const props = defineProps({
  modelValue: { type: [String, Number, Array], default: () => {} },
  title: { type: String, default: "buttonText" },
  icon: { type: String, default: "icon-plus" },
  rounded: { type: Boolean, default: false },
  multiple: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  draggable: { type: Boolean, default: false },
  size: { type: Number, default: 4 * 1024 * 1024 },
  chunk: { type: Boolean, default: false },
  chunkSize: { type: Number, default: 1 * 1024 * 1024 },
  limit: { type: Number, default: 0 },
  tip: { type: String, default: undefined },
  type: { type: String, default: "image" },
  accept: { type: String, default: "*" },
  returnType: { type: String, default: "url" },
  fileType: { type: String, default: "button" },
  showList: { type: Boolean, default: true },
  requestData: { type: Object, default: {} }
})

if (!["id", "url", "hash"].includes(props.returnType)) {
  Message.error("MaUpload组件props的returnType只能为：id, url, hash 其中一个")
  console.error("MaUpload组件props的returnType只能为：id, url, hash 其中一个")
}

watch(
  () => props.modelValue,
  (val) => {
    file.value = val
  },
  {
    deep: true,
    immediate: true
  }
)

provide("storageMode", uploadConfig.storageMode)
provide("config", props)

watch(
  () => file.value,
  (vl) => emit("update:modelValue", vl)
)
</script>
